import { getDetailChartListUsingPOST } from "@/services/arong/chartController";
import { UploadOutlined } from "@ant-design/icons";
import { Button, Divider, Form, Input, Modal, Table, Upload, message } from "antd";
import FormItem from "antd/es/form/FormItem";
import Column from "antd/es/table/Column";
import ColumnGroup from "antd/es/table/ColumnGroup";
import { useEffect, useState } from "react";


const DatailTableComponent = ({ visible, onCancel, props }) => {

  const [columns, setColumns] = useState<any>([]);
  const [ data, setData ] = useState<any>([]);

  const loadData = async () => {
    const newTableName = props;
    console.log(newTableName);
    const res = await getDetailChartListUsingPOST({
      tableName: newTableName,
    })
    if(!res.data) {
      message.error('无法查询表格数据');
    } else {
      const jsonData = res.data;
    
      const columns = [
        {
          title: '序号',
          dataIndex: '',
          key: 'index',
          render: (text:any, record:any, index:any) => index + 1, // 生成序号值
        },
        ...Object.keys(jsonData[0]).filter(key => key !== 'id').map(key => ({
          title: key,
          dataIndex: key,
          key: key,
        })),
      ];
      
      setColumns(columns);
  
      const tableData = jsonData.map((data : any) => {
        const rowData: { [key: string]: string } = {};
        Object.entries(data).forEach(([key, value]) => {
          rowData[key] = value as string;
        });
        return rowData;
      });
  
      setData(tableData);
    }
  }

  const handleCancel = () => {
    onCancel();
  };


  useEffect(() => {
    loadData();
  },[]);



  return(
    <div>
      <Modal 
      title="数据详情页"
      open={visible}
      onCancel={handleCancel}
      footer={null}
      >
        <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
          <Table
            dataSource={data}
            columns={columns}
            scroll={{ y: 300 }}
            pagination={false}
          />
        </div>
      </Modal>
    </div>
  );
};

export default DatailTableComponent;